<template>
  <div id="lunbo2" @mouseenter="stopSetInterval">
    <div class="lunboShow">

      <ul class="lunbo_img" :style="{'left':deviation,'width':lunboList.length*100+'%'}">
        <li v-for="(item) in lunboList" :key="item">
          <img :src="item"/>
        </li>
      </ul>

      <ul class="lunbo_btn">
        <li v-for="(item,index) in lunboList" :class="{btnSelect:index===myIndex}" @click="lunboBtnClick(index)"
            :key="item"></li>
      </ul>


      <div class="lunbo_left" @click="leftClick">&lang;</div>
      <div class="lunbo_right" @click="rightClick">&rang;</div>

    </div>

  </div>
</template>


<script>
export default {
  name: "LunBo",
  props:{
    lunboList:{//这里的lunboList只能传递图片路径数组
      type:Array,
      defaults:[]
    }
  },
  data(){
    return{
      myIndex:0,
      deviation:"",
      setIntervalIndex:"",
      homeWidth:0
    }
  },
  methods:{
    rightClick(){
      this.myIndex++;
      if (this.myIndex>=this.lunboList.length){
        this.myIndex=0;
      }
      this.deviation=-1*100*this.myIndex+"%";
    },
    leftClick(){
      this.myIndex--;
      if (this.myIndex<0){
        this.myIndex=this.lunboList.length-1;
      }
      this.deviation=-1*100*this.myIndex+"%";
    },
    lunboBtnClick(index){
      this.myIndex=index;//为了确保底部按钮的一致性，所以组件中的状态值也要进行变化
      this.deviation=-1*100*index+"%";
    },
    stopSetInterval(){
      this.setIntervalIndex.clearInterval;
    }
  },
  created() {
    this.setIntervalIndex=setInterval(()=>{
      this.rightClick();
    },3000);
  },
  mounted() {
  }
}
</script>

<style scoped>
#lunbo2 .lunboShow{
  position: relative;
  overflow: hidden;
  width: 100%;
}
#lunbo2 .lunboShow .lunbo_img{
  position: relative;
  display: flex;
  height: 300px;
}
#lunbo2 .lunboShow .lunbo_img li{
  width: 100%;
  height: 100%;
}
#lunbo2 .lunboShow .lunbo_img li img{
  width: 100%;
}
#lunbo2 .lunbo_btn{
  display: flex;
  position: absolute;
  z-index: 10;
  bottom: 7px;
  left: 50%;
  transform: translateX(-50%);
}
#lunbo2 .lunbo_btn li{
  width: 20px;
  height: 3px;
  margin-left: 10px;
  background: rgba(255,255,255,.6);
}
.lunboShow:hover .lunbo_left,.lunboShow:hover .lunbo_right{
  display: block;
}
.lunbo_left , .lunbo_right{
  display: none;

  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  color: white;
  font-size: 20px;
  text-align: center;
  line-height: 35px;
  border-radius: 50%;
  background: rgba(255,255,255,.3);
  z-index: 10;
}
.lunbo_left:hover , .lunbo_right:hover{
  cursor: pointer;
  background-color: rgba(255,255,255,.8);
  color: #000000;
}
.lunbo_left{
  left: 5px;
}
.lunbo_right{
  right: 5px;
}

.btnSelect{
  background-color: rgba(255,255,255,.9)!important;
}


</style>
